<template>
	<view class="record-detail page-content timeLine">
		<nav-bar back >{{dataList.name}}</nav-bar>
		<view class="page-main page-main-content">
			<view class="timeLine-item middleLeft" style="display: flex;">
				<view class="firstLine  middleLeft">
					<view class="yuan"></view>
					现在
				</view>
				
			</view>
			<view class="timeLine-item" v-for="item in dataList.dataChildren" @click="goDetail(item)">
				<view class="line  middleLeft">
					间隔 {{item.duration}}
				</view>
				<data-info style="margin-bottom: 0;" :data="item"></data-info>
			</view>
		</view>
		
	</view>
</template>


<script setup>
	import { onLoad } from '@dcloudio/uni-app';
	import {ref} from 'vue'
	import dayjs from 'dayjs'
	import durationPlugin from 'dayjs/plugin/duration';
	const dataList = ref([])
	// 加载所需的dayjs插件
	dayjs.extend(durationPlugin);
	
	const goDetail=(item)=>{
		uni.navigateTo({
			url: `/pages/tabbar/tabbar-1/recordInfo?id=${item.id}`
		});
	}
	
	// 当前时间
	const now = dayjs();
	
	// 格式化时间差为 "时:分:秒"
	function formatDuration(diffInMilliseconds) {
	  const duration = dayjs.duration(diffInMilliseconds); // 计算持续时间
	  const hours = Math.floor(duration.asHours()); // 小时
	  const minutes = duration.minutes(); // 分钟
	  const seconds = duration.seconds(); // 秒
	  
	  
	  let h = hours ? `${hours}小时` : ''
	  let m = minutes ? `${minutes}分钟` : ''
	  let s = seconds ? `${seconds}秒` : ''
	  
	  return `${h}${m}${s}`;
	}
	
	
	
	
	onLoad((options) => {
		dataList.value = uni.getStorageSync('timeLine')
		// dataList.value
		// 遍历时间戳数组，计算每个时间戳与当前时间的差值
		dataList.value.dataChildren = dataList.value.dataChildren.map((item,index) => {
			const timestamp = item.updateTime
		  const timestampTime = dayjs(timestamp); // 将时间戳转换为 dayjs 对象
		  // const stepTimestampTime = dayjs(timestamp); // 将时间戳转换为 dayjs 对象
		  
		  let diff = ''
		  if(index === 0){
			  diff = now.diff(timestampTime); // 计算时间差（毫秒）
		  }else{
			  // diff = timestampTime.diff(dayjs(dataList.value.dataChildren[index-1].updateTime)); // 计算时间差（毫秒）
			  diff =  dayjs(dataList.value.dataChildren[index-1].updateTime) .diff(timestampTime); // 计算时间差（毫秒）
		  }
		  
		  
		  return {
			  ...item,
		    duration: formatDuration(diff), // 格式化时间差
		  };
		});
		
		
		console.log(dataList.value,'传说');
	})
	
	
	
</script>

<style lang="scss" scoped>
	.page-main-content{
		padding: 20rpx;
		.line{
			font-size: 28rpx;
			height: 120rpx;
			margin-left: 60rpx;
			border-left: 1px solid orange;
			padding-left: 40rpx;
			color: #999;
		}
		.firstLine{
			.yuan{
				width: 10rpx;
				height: 10rpx;
				border-radius: 100%;
				background: orange;
				margin-right: 30rpx;
			}
			
			margin-left: 56rpx;
			margin-bottom: 20rpx;
		}
	}
</style>